<!--
 * @Author: GuoShuning
 * @Date: 2022-12-15 14:02:11
 * @LastEditors: LiuYan
 * @LastEditTime: 2023-01-04 10:51:21
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./common/css/coommon.css" />
    <script
      src="./common/js/jquery-1.7.2.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <title>新增供应商</title>
  </head>

  <body>
    <div class="contractList_dialog" id="contractList_dialog">
      <div class="dialogAddTable">
        <div class="dialogAddTable_itemBox">
          <!-- 下拉 一整行 -->
          <div class="itemAddBox itemAddBox_col_12 itemAddBox_line">
            <div class="itemAddBox_tips"><span>*</span>合同类型</div>
            <div class="itemAddBox_input">
              <div class="select-group">
                <div class="options">
                  <input placeholder="输入关键字" />
                  <ul>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!-- 输入框  半行 -->
          <div class="itemAddBox itemAddBox_col_6 itemAddBox_line">
            <div class="itemAddBox_tips"><span>*</span>合同名称</div>
            <div class="itemAddBox_input">
              <div class="input-group">
                <input name="demoInput" placeholder="输入关键字" />
              </div>
            </div>
          </div>
          <!-- 输入框  半行 -->
          <div class="itemAddBox itemAddBox_col_6 itemAddBox_line">
            <div class="itemAddBox_tips"><span>*</span>合同编号</div>
            <div class="itemAddBox_input">
              <div class="input-group">
                <input placeholder="输入关键字" />
              </div>
            </div>
          </div>
          <!-- 下拉 半行 -->
          <div class="itemAddBox itemAddBox_col_6 itemAddBox_line">
            <div class="itemAddBox_tips"><span>*</span>经办人</div>
            <div class="itemAddBox_input">
              <div class="select-group">
                <div class="options">
                  <input placeholder="输入关键字" />
                  <ul>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="itemAddBox itemAddBox_col_6 itemAddBox_line">
            <div class="itemAddBox_tips"><span>*</span>经办人</div>
            <div class="itemAddBox_input">
              <div class="select-group">
                <div class="options">
                  <input placeholder="输入关键字" />
                  <ul>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="itemAddBox itemAddBox_textarea itemAddBox_col_12">
            <div class="itemAddBox_tips"><span>*</span>合同编号</div>
            <div class="itemAddBox_input">
              <textarea
                name=""
                id=""
                autosize
                rows="4"
                placeholder="请输入..."
              ></textarea>
            </div>
          </div>
        </div>
        <div class="dialogAddTable_otherLabel">
          <div class="otherLabel_name">涉及品牌</div>
          <div class="item_otherLabel" v-for="(item,index) in ibms_active">
            {{item.name}}
            <img
              @click="()=>{
                ibms_active.splice(index,1)
            }"
              src="./common/img/lable_del.png"
              style="width: 11px; height: 11px"
            />
          </div>
          <div @click="onLableDialog" class="add_otherLabel">
            <i class="bi bi-plus-lg"></i>品牌
          </div>
        </div>
        <div class="dialogAddTable_dragUploadFile">
          <div class="dialogAddTable_Desc">上传附件</div>
          <div class="dialogAddTable_dragFile" @click="onUpload">
            <img
              src="./common/img/dragUpload.png"
              style="width: 36px; height: 30px"
            />
            <div><span>点击</span>或将文件拖拽到这里上传</div>
          </div>
          <div class="dragFile_desc">
            支持扩展名：.rar .zip .doc .docx .pdf .jpg...
          </div>
          <div class="dragFileList">
            <div class="item_dragFile" v-for="(item,index) in files">
              <div class="leftFileName">
                <img
                  src="./common/img/file_icon.png"
                  style="width: 17px; height: 20px"
                />
                <div class="fileName">{{item.name}}</div>
                <div class="fileSize">{{item.size}}</div>
              </div>
              <div class="fileAction">
                <img
                  class="fileSuccess"
                  src="./common/img/file_success.png"
                  style="width: 16px; height: 16px"
                />
                <img
                  @click="()=>{
                    files.splice(index,1)
                  }"
                  class="fileDelete"
                  src="./common/img/file_delete.png"
                  style="width: 11px; height: 11px"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增供应商 --- 涉及品牌 -->
    <div
      id="dialog_content_labelsSelect"
      style="display: flex; flex-wrap: wrap"
    >
      <div class="labelsSelect_add" v-for="item in ibms">
        <label>
          <input v-model="item.isActive" type="checkbox" />{{item.name}}
        </label>
      </div>
    </div>
  </body>
  <script src="./common/js/vue.js"></script>

  <script type="module">
    import DiaLog from "./common/js/diaLog.js";
    function save() {
      return {
        ibms_active: app.ibms_active,
        files: app.files,
      };
    }
    window.save = save;
    // 新增供应商 --- 涉及品牌
    let labelsDialog = new DiaLog({
      title: "涉及品牌",
      width: "50% ",
      el: "#dialog_content_labelsSelect",
      cancelText: "取消",
      confirmText: "确定",
      zIndex: 101,
      cancel: () => {
        console.log("取消");
        labelsDialog.hide();
      },
      confirm: (document) => {
        app.ibms_active = [];
        appDialog.ibms.forEach((item) => {
          if (item.isActive) {
            app.ibms_active.push(item);
          }
        });
        labelsDialog.hide();
      },
    });
    const { createApp } = Vue;
    // 用户当前页面Vue
    let app = createApp({
      data() {
        return {
          ibms_active: [],
          files: [],
        };
      },
      mounted() {},
      methods: {
        onUpload() {
          const input = document.createElement("input");
          input.type = "file";
          document.body.appendChild(input);
          input.click();
          // 上传结束之后，删除此图标
          input.remove();
          input.onchange = function (val) {
            const filePath = val.target.files[0];
            const formData = new FormData();
            formData.append("file", filePath);
            // ajax之后在赋值
            this.files.push({
              name: filePath.name,
              size: "12kb",
            });
          }.bind(this);
        },
        // 调用 涉及品牌的弹出框
        onLableDialog() {
          labelsDialog.show();
          if (appDialog == null) appDialogFun();
          appDialog.ibms.forEach((_item) => {
            _item.isActive = false;
            this.ibms_active.forEach((item) => {
              if (_item.id == item.id) {
                _item.isActive = true;
              }
            });
          });
        },
      },
    }).mount("#contractList_dialog");

    // 用户弹框中的Vue
    let appDialog = null;
    function appDialogFun() {
      appDialog = createApp({
        data() {
          return {
            ibms: [
              {
                id: 1,
                name: "供应商1",
                isActive: false,
              },
              {
                id: 2,
                name: "供应商1",
                isActive: false,
              },
            ],
          };
        },
      }).mount(labelsDialog.doc.querySelector("#dialog_content_labelsSelect"));
    }
  </script>
</html>
